import { Button, Popup, Steps, TextArea } from 'antd-mobile'
import { Card, NavBar } from 'antd-mobile'
import axios from 'axios'
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import { useSelector } from 'react-redux'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { CloseCircleOutline } from 'antd-mobile-icons'


import image from '../img/image.png'


const { Step } = Steps

function Detail() {
    const navigate = useNavigate()
    const counterSlice = useSelector((state) => state.counterSlice)

    const [params] = useSearchParams();
    const id = params.get("id");

    const [data, setData] = useState([])
    const [visible1, setVisible1] = useState(false)

    const [value, setValue] = useState('')

    const getData = async () => {
        const res = await axios.get(`/api/trip/train/detail?id=${id}`);
        console.log(res);
        setData(res.data.data)
    }
    useEffect(() => {
        getData()
    }, [])
    return (
        <div>
            <NavBar back='' >
                {counterSlice.date} 周二
            </NavBar>

            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div>
                    <p>21:02</p>
                    {data.start}
                </div>
                <div>
                    <p>{data.startTime}</p>
                    <p onClick={() => {
                        setVisible1(true)
                    }}>D2214·时刻表</p>
                </div>
                <div>
                    <p>3:02</p>
                    {data.end}
                </div>

            </div>

            <div style={{ display: 'flex', justifyContent: 'space-between' }}>

                <div onClick={() => {
                    navigate(`/order?id=${data.id}`)
                }} style={{ backgroundColor: '#d0d0d0', width: '100px', height: '100px' }}>
                    <p>有票方案</p>
                    <p>￥{data.tick?.firstTick}</p>
                    <p>有票</p>
                </div>

                <div style={{ backgroundColor: '#d0d0d0', width: '100px', height: '100px', marginLeft: '10px' }}>
                    <p>二等座</p>
                    <p>￥{data.tick?.vip}</p>
                    <p>无票</p>
                </div>
                <div style={{ backgroundColor: '#d0d0d0', width: '100px', height: '100px', marginLeft: '10px' }}>
                    <p>一等座</p>
                    <p>￥{data.tick?.secondTick}</p>
                    <p>仅剩5张</p>
                </div>
                <div style={{ backgroundColor: '#d0d0d0', width: '100px', height: '100px', marginLeft: '10px' }}>
                    <p>商务座</p>
                    <p>￥{data.tick?.firstTick}</p>
                    <p>仅剩8张</p>
                </div>

            </div>

            <div>
                <p>二等座已售罄,为您找到以下有票方案~</p>
            </div>

            <div>
                <Card >
                    <Steps current={2}>
                        <Step title='上车' description='北京南' />
                        <Step title='二等座' />
                        <Step title='补4站' />
                        <Step title='下车' description='广州' />
                    </Steps>
                </Card>
            </div>

            <div>
                <Card >
                    <div style={{ display: 'flex' }}>
                        <div>
                            <p style={{ color: '#e46e13ff' }}>￥<b>333</b></p>

                            <p style={{ color: '#e46e13ff' }}>限时已补￥4</p>

                        </div>


                        <Button style={{ marginLeft: '148px', color: '#fff', width: '80px', height: '40px' }} color='warning' fill='solid'>
                            订
                        </Button>
                    </div>
                    <div>
                        <img src={image} alt="" />

                    </div>

                </Card>
                <Card >
                    <div style={{ display: 'flex' }}>
                        <div>
                            <p style={{ color: '#e46e13ff' }}>￥<b>333</b></p>
                            <p></p>
                            <p style={{ color: '#e46e13ff' }}>限时已补￥4</p>
                            <p></p>
                        </div>

                        <div>
                            <Button style={{ marginLeft: '148px', color: '#fff', }} color='warning' fill='solid'>
                                订
                            </Button>
                        </div>

                    </div>


                </Card>
                <Card >
                    <div style={{ display: 'flex' }}>
                        <span style={{ color: '#e46e13ff' }}>￥<b>333</b></span>
                        <span style={{ color: '#e46e13ff' }}>限时已补￥4</span>
                        <Button style={{ marginLeft: '148px', color: '#fff', }} color='warning' fill='solid'>
                            订
                        </Button>
                    </div>


                </Card>
            </div>

            {/* 底部弹出 */}
            <div>
                <Popup
                    visible={visible1}
                    onMaskClick={() => {
                        setVisible1(false)
                    }}
                    onClose={() => {
                        setVisible1(false)
                    }}
                    bodyStyle={{ height: '90vh' }}
                >

                    <div style={{ position: 'relative' }}>
                        <h2>时刻表</h2>
                        <span onClick={() => {
                            setVisible1(false)
                        }} style={{ position: 'absolute', left: '330px', top: '8px' }}><CloseCircleOutline /></span>
                    </div>

                    <div>
                        <div style={{ display: 'flex' }}>
                            <span style={{ margin: '20px' }}>车站名称</span>
                            <span style={{ margin: '20px' }}>到达</span>
                            <span style={{ margin: '20px' }}>出发</span>
                            <span style={{ margin: '20px' }}>停留</span>
                        </div>

                        <div style={{ display: 'flex' }}>
                            <div>
                                <Steps direction='vertical'>
                                    <Step title='北京南' status='process' />
                                    <Step title='天津南' status='wait' />
                                    <Step title='济南西' status='wait' />
                                    <Step title='曲阜东' status='wait' />
                                    <Step title='徐州东' status='wait' />
                                    <Step title='宿州东' status='wait' />
                                    <Step title='南京南' status='wait' />
                                    <Step title='广州南' status='wait' />
                                </Steps>
                            </div>


                            <div >
                                <div style={{ display: 'flex' }}>
                                    <span style={{ marginLeft: '20px' }}>--</span>
                                    <span style={{ marginLeft: '53px' }}>06:23</span>
                                    <span style={{ marginLeft: '43px' }}>--</span>
                                </div>
                                <div style={{ display: 'flex', marginTop: '38px' }}>
                                    <span style={{ marginLeft: '20px' }}>07:：30</span>
                                    <span style={{ marginLeft: '53px' }}>06:23</span>
                                    <span style={{ marginLeft: '43px' }}>12：22</span>
                                </div>
                                <div style={{ display: 'flex', marginTop: '24px' }}>
                                    <span style={{ marginLeft: '20px' }}>07:：30</span>
                                    <span style={{ marginLeft: '53px' }}>06:23</span>
                                    <span style={{ marginLeft: '43px' }}>12：22</span>
                                </div>
                                <div style={{ display: 'flex', marginTop: '30px' }}>
                                    <span style={{ marginLeft: '20px' }}>07:：30</span>
                                    <span style={{ marginLeft: '53px' }}>06:23</span>
                                    <span style={{ marginLeft: '43px' }}>12：22</span>
                                </div>
                                <div style={{ display: 'flex', marginTop: '26px' }}>
                                    <span style={{ marginLeft: '20px' }}>07:：30</span>
                                    <span style={{ marginLeft: '53px' }}>06:23</span>
                                    <span style={{ marginLeft: '43px' }}>12：22</span>
                                </div>
                                <div style={{ display: 'flex', marginTop: '25px' }}>
                                    <span style={{ marginLeft: '20px' }}>07:：30</span>
                                    <span style={{ marginLeft: '53px' }}>06:23</span>
                                    <span style={{ marginLeft: '43px' }}>12：22</span>
                                </div>
                                <div style={{ display: 'flex', marginTop: '24px' }}>
                                    <span style={{ marginLeft: '20px' }}>07:：30</span>
                                    <span style={{ marginLeft: '53px' }}>06:23</span>
                                    <span style={{ marginLeft: '43px' }}>12：22</span>
                                </div>
                                <div style={{ display: 'flex', marginTop: '24px' }}>
                                    <span style={{ marginLeft: '20px' }}>07:：30</span>
                                    <span style={{ marginLeft: '53px' }}>06:23</span>
                                    <span style={{ marginLeft: '43px' }}>12：22</span>
                                </div>
                            </div>

                        </div>

                    </div>
                </Popup>
            </div>


            <div>
                <h2>评价</h2>
                <div>
                    <h3>您愿意推荐好友来同程旅行预订火车票吗?</h3>

                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <span>0</span>
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                        <span>6</span>
                        <span>7</span>
                        <span>8</span>
                        <span>9</span>
                        <span>10</span>
                    </div>

                    <h2>不推荐,我要吐槽:</h2>
                    <div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span>账号登录麻烦</span>
                            <span>退票到账慢</span>
                            <span>改签不好用</span>
                            <span>出票速度慢</span>
                        </div>
                    </div>

                    <TextArea
                        placeholder='请输入内容'
                        value={value}
                        onChange={val => {
                            setValue(val)
                        }}
                    />

                    <Button block shape='rounded' color='success' size='large'>
                        提交
                    </Button>
                </div>
            </div>
        </div>
    )
}

export default Detail